import { defineComponent, ref, reactive, nextTick } from 'vue'
import { themesStore } from '@/stores/modules/theme'
import { storeToRefs } from 'pinia'
import { local } from '@/utils/storage'
import predefineColors from '@/common/predefineColors'
import themeMould, { getThemeConfirg } from '@/common/theme'
import { handler } from '@/utils'
import {
  NDrawer,
  NDrawerContent,
  NForm,
  NFormItem,
  NColorPicker,
  NSelect,
  NInput,
  NSwitch,
  NCollapse,
  NCollapseItem,
} from 'naive-ui'
import themeStyle from './styles/index.module.scss'

export default defineComponent({
  name: 'ThemeConfig',
  setup(props, { expose }) {
    const theme = themesStore()
    const { getThemeConfig: themeConfirm } = storeToRefs(theme)
    const { setConfirmTheme } = theme

    const animationOptions = [
      {
        label: '右侧进入',
        value: 'slide-right',
      },
      {
        label: '左侧进入',
        value: 'slide-left',
      },
      {
        label: '透明',
        value: 'opacitys',
      },
    ]

    const typeOptions = [
      {
        label: '自适应',
        value: 'auto',
      },
      {
        label: '分栏',
        value: 'columns',
      },
      {
        label: '常规',
        value: 'routine',
      },
      {
        label: '抽屉',
        value: 'drawers',
      },
    ]

    const tabs = reactive([
      {
        name: 'DIY',
      },
      {
        name: '模板',
      },
    ])
    const curren = ref('DIY')

    /**
     *  更换模板
     * */
    const mouldName = ref(null)
    const handMouldChange = (e: string) => {
      if (e) {
        const theme = getThemeConfirg(e)
        setConfirmTheme(theme)
        setVarCss(theme)
        setDispatchThemeConfig()
      }
    }

    const setVarCss = (info, name = '--yang') => {
      for (const infoKey in info) {
        if (!['animation', 'isClose'].includes(infoKey)) {
          const cssName = name + `-${handler(infoKey)}`
          if (typeof info[infoKey] === 'string') {
            document.documentElement.style.setProperty(cssName, info[infoKey])
          } else {
            setVarCss(info[infoKey], cssName)
          }
        }
      }
    }

    /**
     *  diy样式发生改变
     * */
    const onChange = (value: string, name?: string) => {
      if (name) {
        document.documentElement.style.setProperty(`--yang-${name}`, value)
      }
      setDispatchThemeConfig()
    }
    const handBlur = (e, name?: string) => {
      if (name) {
        document.documentElement.style.setProperty(`--yang-${name}`, e.target.value)
      }
      setDispatchThemeConfig()
    }

    /**
     *  更新布局
     * */
    const setDispatchThemeConfig = () => {
      setLocalThemeConfig()
      setLocalThemeConfigStyle()
    }

    const setLocalThemeConfig = () => {
      local.remove('themeConfig')
      nextTick(() => {
        local.set('themeConfig', themeConfirm.value as Record<string, unknown>)
      })
    }
    const setLocalThemeConfigStyle = () => {
      local.set('themeConfigStyle', document.documentElement.style.cssText)
    }

    const drawer = ref(false)
    const showEdit = () => {
      drawer.value = true
    }
    expose({
      showEdit,
    })
    return () => (
      <>
        <NDrawer class={themeStyle.themeDrawer} v-model:show={drawer.value} width={288}>
          <NDrawerContent>
            {{
              header: () => (
                <div class={`${themeStyle.tabs}`}>
                  {tabs.map((item) => (
                    <div
                      class={`tab ${item.name === curren.value ? 'tab-active' : ''}`}
                      onClick={() => (curren.value = item.name)}
                    >
                      {item.name}
                    </div>
                  ))}
                </div>
              ),
              default: () => (
                <div class={themeStyle.themePage}>
                  <NForm model={themeConfirm.value}>
                    {curren.value === 'DIY' ? (
                      <>
                        <NCollapse accordion>
                          <NCollapseItem title="公共布局" name="common">
                            <NFormItem label="页面背景">
                              <NColorPicker
                                v-model:value={themeConfirm.value.bgColor}
                                swatches={predefineColors}
                                onComplete={($event) => onChange($event, 'bg-color')}
                              />
                            </NFormItem>
                            <NFormItem label="切换动画">
                              <NSelect
                                v-model:value={themeConfirm.value.animation}
                                options={animationOptions}
                                onUpdateValue={onChange}
                              />
                            </NFormItem>
                            <NFormItem label="布局">
                              <NSelect
                                v-model:value={themeConfirm.value.type}
                                options={typeOptions}
                                onUpdateValue={onChange}
                              />
                            </NFormItem>
                          </NCollapseItem>
                          <NCollapseItem title="左侧一级菜单" name="leftOne">
                            <NFormItem label="页面背景">
                              <NColorPicker
                                v-model:value={themeConfirm.value.menu.navone.bgColor}
                                swatches={predefineColors}
                                onComplete={($event) => onChange($event, 'menu-navone-bg-color')}
                              />
                            </NFormItem>
                            <NFormItem label="选中背景颜色">
                              <NColorPicker
                                v-model:value={themeConfirm.value.menu.navone.cardActiveBgColor}
                                swatches={predefineColors}
                                onComplete={($event) =>
                                  onChange($event, 'menu-navone-card-active-bg-color')
                                }
                              />
                            </NFormItem>
                            <NFormItem label="字体颜色">
                              <NColorPicker
                                v-model:value={themeConfirm.value.menu.navone.textColor}
                                swatches={predefineColors}
                                onComplete={($event) => onChange($event, 'menu-navone-text-color')}
                              />
                            </NFormItem>
                            <NFormItem label="选中字体颜色">
                              <NColorPicker
                                v-model:value={themeConfirm.value.menu.navone.cardActiveTextColor}
                                swatches={predefineColors}
                                onComplete={($event) =>
                                  onChange($event, 'menu-navone-card-active-text-color')
                                }
                              />
                            </NFormItem>
                            <NFormItem label="宽度">
                              <NInput
                                v-model:value={themeConfirm.value.menu.navone.width}
                                type="text"
                                placeholder="请输入"
                                onBlur={($event) => handBlur($event, 'menu-navone-width')}
                              />
                            </NFormItem>
                            <NFormItem label="card圆角">
                              <NInput
                                v-model:value={themeConfirm.value.menu.navone.cardRadius}
                                type="text"
                                placeholder="请输入"
                                onBlur={($event) => handBlur($event, 'menu-navone-card-radius')}
                              />
                            </NFormItem>
                            <NFormItem label="card宽度">
                              <NInput
                                v-model:value={themeConfirm.value.menu.navone.cardWidth}
                                type="text"
                                placeholder="请输入"
                                onBlur={($event) => handBlur($event, 'menu-navone-card-width')}
                              />
                            </NFormItem>
                            <NFormItem label="card高度">
                              <NInput
                                v-model:value={themeConfirm.value.menu.navone.cardHeight}
                                type="text"
                                placeholder="请输入"
                                onBlur={($event) => handBlur($event, 'menu-navone-card-height')}
                              />
                            </NFormItem>
                          </NCollapseItem>
                          <NCollapseItem title="左侧二级菜单" name="leftTwo">
                            <NFormItem label="标题颜色">
                              <NColorPicker
                                v-model:value={themeConfirm.value.menu.navtwo.titleColor}
                                swatches={predefineColors}
                                onComplete={($event) => onChange($event, 'menu-navtwo-title-color')}
                              />
                            </NFormItem>
                            <NFormItem label="副标题颜色">
                              <NColorPicker
                                v-model:value={themeConfirm.value.menu.navtwo.lineTextColor}
                                swatches={predefineColors}
                                onComplete={($event) =>
                                  onChange($event, 'menu-navtwo-line-text-color')
                                }
                              />
                            </NFormItem>
                            <NFormItem label="分割线颜色">
                              <NColorPicker
                                v-model:value={themeConfirm.value.menu.navtwo.lineColor}
                                swatches={predefineColors}
                                onComplete={($event) => onChange($event, 'menu-navtwo-line-color')}
                              />
                            </NFormItem>
                            <NFormItem label="背景颜色">
                              <NColorPicker
                                v-model:value={themeConfirm.value.menu.navtwo.bgColor}
                                swatches={predefineColors}
                                onComplete={($event) => onChange($event, 'menu-navtwo-bg-color')}
                              />
                            </NFormItem>
                            <NFormItem label="选中背景颜色">
                              <NColorPicker
                                v-model:value={themeConfirm.value.menu.navtwo.cardActiveBgColor}
                                swatches={predefineColors}
                                onComplete={($event) =>
                                  onChange($event, 'menu-navtwo-card-active-bg-color')
                                }
                              />
                            </NFormItem>
                            <NFormItem label="字体颜色">
                              <NColorPicker
                                v-model:value={themeConfirm.value.menu.navtwo.textColor}
                                swatches={predefineColors}
                                onComplete={($event) => onChange($event, 'menu-navtwo-text-color')}
                              />
                            </NFormItem>
                            <NFormItem label="选中字体颜色">
                              <NColorPicker
                                v-model:value={themeConfirm.value.menu.navtwo.cardActiveTextColor}
                                swatches={predefineColors}
                                onComplete={($event) =>
                                  onChange($event, 'menu-navtwo-card-active-text-color')
                                }
                              />
                            </NFormItem>
                            <NFormItem label="线高度">
                              <NInput
                                v-model:value={themeConfirm.value.menu.navtwo.lineHeight}
                                type="text"
                                placeholder="请输入"
                                onBlur={($event) => handBlur($event, 'menu-navtwo-line-height')}
                              />
                            </NFormItem>
                            <NFormItem label="宽度">
                              <NInput
                                v-model:value={themeConfirm.value.menu.navtwo.width}
                                type="text"
                                placeholder="请输入"
                                onBlur={($event) => handBlur($event, 'menu-navtwo-width')}
                              />
                            </NFormItem>
                            <NFormItem label="card圆角">
                              <NInput
                                v-model:value={themeConfirm.value.menu.navtwo.cardRadius}
                                type="text"
                                placeholder="请输入"
                                onBlur={($event) => handBlur($event, 'menu-navtwo-card-radius')}
                              />
                            </NFormItem>
                          </NCollapseItem>
                          <NCollapseItem title="顶部导航" name="topNav">
                            <NFormItem label="背景颜色">
                              <NColorPicker
                                v-model:value={themeConfirm.value.menu.navtop.bgColor}
                                swatches={predefineColors}
                                onComplete={($event) => onChange($event, 'menu-navtop-bg-color')}
                              />
                            </NFormItem>
                            <NFormItem label="字体颜色">
                              <NColorPicker
                                v-model:value={themeConfirm.value.menu.navtop.textColor}
                                swatches={predefineColors}
                                onComplete={($event) => onChange($event, 'menu-navtop-text-color')}
                              />
                            </NFormItem>
                            <NFormItem label="锁颜色">
                              <NColorPicker
                                v-model:value={themeConfirm.value.menu.navtop.suoTextColor}
                                swatches={predefineColors}
                                onComplete={($event) =>
                                  onChange($event, 'menu-navtop-suo-text-color')
                                }
                              />
                            </NFormItem>
                            <NFormItem label="定义可收起">
                              <NSwitch
                                v-model:value={themeConfirm.value.menu.navtop.isClose}
                                onUpdateValue={onChange}
                              />
                            </NFormItem>
                          </NCollapseItem>
                        </NCollapse>
                      </>
                    ) : (
                      <>
                        <NFormItem label="模板">
                          <NSelect
                            v-model:value={mouldName.value}
                            options={themeMould as any}
                            label-field="name"
                            value-field="name"
                            clearable
                            placeholder="请选择模板"
                            onUpdateValue={handMouldChange}
                          />
                        </NFormItem>
                      </>
                    )}
                  </NForm>
                </div>
              ),
            }}
          </NDrawerContent>
        </NDrawer>
      </>
    )
  },
})
